<template>
  <div class="desktop-windows">
    <DesktopWindow
      v-for="window in windows"
      :key="window.id"
      :window="window"
      :is-active="activeWindowId === window.id"
      @activate="$emit('activate', $event)"
      @dragstart="$emit('dragstart', $event)"
      @minimize="$emit('minimize', $event)"
      @toggle-maximize="$emit('toggle-maximize', $event)"
      @close="$emit('close', $event)"
      @resize-start="$emit('resize-start', $event)"
    />
  </div>
</template>

<script setup>
import DesktopWindow from './DesktopWindow.vue'

defineProps({
  windows: {
    type: Array,
    required: true
  },
  activeWindowId: {
    type: String,
    default: null
  }
})

defineEmits(['activate', 'dragstart', 'minimize', 'toggle-maximize', 'close', 'resize-start'])
</script>

<style scoped>
.desktop-windows {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 48px;
  z-index: 10;
  pointer-events: none;
}
</style>

